<!DOCTYPE html>

<html>

<head>
   <meta http-equiv="content-type" content="text/html; charset=UTF-8">
   <meta charset="utf-8">
   <meta name="viewport"
         content="width=device-width, initial-scale=1.0, user-scalable=no, target-densitydpi=device-dpi">

   <title>3D模型查看器</title>
   <style type="text/css">
      html,
      body {
         width: 100%;
         height: 100%;
         margin: 0px;
      }

      body {
         overflow: hidden;
      }

      input,
      select,
      button,
      textarea {
         border: 1px solid white;
         background-color: black;
         color: white;
      }

      option {
         background-color: black;
         color: white;
      }

      a {
         color: white;
      }

      #glmol01 {
         width: 100%;
         height: 100%;
         background-color: black;
         position: absolute;
      }

      .settings {
         position: absolute;
         right: 0px;
         top: 10%;
         background-color: grey;
         -moz-transform: rotate(-90deg);
         -webkit-transform: rotate(-90deg);
         margin: 0px;
         padding: 10px;
         -moz-transform-origin: 110% 100%;
         -webkit-transform-origin: 110% 100%;
         -webkit-border-radius: 10px 10px 0px 0px;
         -moz-border-radius: 10px 10px 0px 0px;
      }

      .controller {
         position: absolute;
         width: 0px;
         right: 0px;
         top: 10%;
         background-color: rgba(0, 0, 0, 0.65);
         color: white;
      }

      .tabBox {
         position: absolute;
         padding: 0px;
         color: white;
         bottom: 0px;
         height: 20px;
         width: 60%;
      }

      .bottomTab {
         background-color: black;
         border: 1px solid white;
         color: white;
         margin: 0px;
         padding: 10px 10px 0px 10px;
         -webkit-border-radius: 10px 10px 0px 0px;
         -moz-border-radius: 10px 10px 0px 0px;
      }

      .insideTab {
         border: 1px solid white;
         width: 100%;
         height: 100%;
         background-color: rgba(0, 0, 0, 0.85);
         margin: 0px;
         overflow: scroll;
      }

      .tabBox p,
      .tabBox h1,
      .tabBox ul {
         margin-left: 10px;
         font-size: 90%;
      }
   </style>
</head>

<body>

<div id="glmol01"></div>

<div class="tabBox" id="glmol01_infobox" style="left: 40%; z-index: 2;">
   <span class="bottomTab">使用</span>
   <div class="insideTab" style="overflow: auto;">
      <h1>使用说明</h1>
      <p>GLmol -- Molecular Viewer on WebGL/Javascript<br>
         Version 0.47 (20120827)</p>
      <p>This program is written by biochem_fan and released under LGPL. Please visit <a
              href="http://webglmol.sfjp.jp/">my project page</a> for the details and source code distribution.</p>
      <p>Comments and Suggestions are welcome. Please mail to biochem_fan at users.sourceforge.jp or write in <a
              href="http://sourceforge.jp/projects/webglmol/forums/">the forum</a>.</p>
      <h1>How to use</h1>
      <ul>
         <li>Rotation: left button</li>
         <li>Translation: middle button or Ctrl-key + left button</li>
         <li>Zoom: mousewheel or right button(up/down) or Shift-key + left button(up/down)</li>
         <li>Slab: left button + Ctrl-key. horizontal move adjusts near clipping plane, vertical move far clipping
            plane.</li>
      </ul>
      <p>You can also change mouse mode with radio buttons at right-bottom corner.</p>
   </div>
</div>

<div class="tabBox" id="glmol01_srcbox" style="display: none; left: 10%; z-index:0;">
   <span class="bottomTab">Load</span>
   <div class="insideTab">
      You can load PDB, MOL2, SDF/MOL(MDL not SYBYL) or XYZ files <br>
      -from local disk (don't worry. your file will not be uploaded),
      <input id="glmol01_file" type="file" size=1><button onClick="loadFile()">Load from file</button><br>
      -from RCSB PDB server,
      PDBID: <input id="glmol01_pdbid" value="2POR" size=4><button
           onClick="download('pdb:' + $('#glmol01_pdbid').val())">Download</button><br>
      -from PubChem server,
      Compound ID(CID): <input id="glmol01_cid" value="2244" size=4><button
           onClick="download('cid:' + $('#glmol01_cid').val())">Download</button><br>
      -or from the textarea
      below.<br>
      <textarea wrap="off" id="glmol01_src" style="width: 100%; height: 8em; overflow:scroll;"></textarea><br>
      <button onClick="glmol01.loadMolecule(); $('#loading').hide();">Reload molecule from textarea</button>
   </div>
</div>

<div class="tabBox" id="glmol01_viewbox" style="left: 25%; z-index:1;">
   <span class="bottomTab">设置</span>
   <div class="insideTab" style="overflow: auto;">
      <h1>设置</h1>
      <div style="display: none;">
         Color by
         <select  id="glmol01_color">
            <option selected="selected" value="chainbow">spectrum</option>
            <option value="chain">chain</option>
            <option value="ss">secondary strcuture</option>
            <option value="b">B factor</option>
            <option value="polarity">polar/nonpolar</option>
         </select><br>
         <input id="glmol01_showMainchain" type="checkbox" checked>
         Main chain as
         <select id="glmol01_mainchain">
            <option selected="selected" value="thickRibbon">thick ribbon</option>
            <option value="ribbon">thin ribbon(faster)</option>
            <option value="strand">strand</option>
            <option value="cylinderHelix">cylinder & plate</option>
            <option value="chain">C alpha trace</option>
            <option value="tube">B factor Tube</option>
            <option value="bonds">bonds (everything)</option>
         </select><br>
         <input id="glmol01_showBases" type="checkbox" checked>
         Nucleic acid bases as
         <select id="glmol01_base">
            <option value="nuclStick">sticks</option>
            <option selected="selected" value="nuclLine">lines</option>
            <option value="nuclPolygon">polygons</option>
         </select><br>
         <input id="glmol01_line" type="checkbox">
         Side chains as lines<br>
         <input id="glmol01_doNotSmoothen" type="checkbox">Don't smooth beta-sheets in ribbons<br>
         <input id="glmol01_showNonBonded" type="checkbox">Non-bonded atoms (solvent/ions) as
         <select id="glmol01_nb">
            <option value="nb_sphere">spheres</option>
            <option selected="selected" value="nb_cross">stars</option>
         </select>
         <br>
         <input id="glmol01_showHetatms" type="checkbox" checked>
         Multiple bond option is for SDF/MOL file ONLY.<br>
         <input id="glmol01_cell" type="checkbox">Unit cell<br>
         <input id="glmol01_biomt" type="checkbox">Biological assembly (the last one defined)<br>
         <input id="glmol01_packing" type="checkbox">Crystal packing<br>
         <input id="glmol01_symopHetatms" type="checkbox">Show HETATMs in symmetry mates (slower)<br>
         Projection: <select id="glmol01_projection">
         <option value="orthoscopic">orthoscopic</option>
         <option selected="selected" value="perspective">perspective</option>
      </select><br>
         <button onClick="saveImage()">Take screenshot</button>
      </div>
      分子模型类别
      <select id="glmol01_hetatm">
         <option value="stick">棍状模型</option>
         <option value="ballAndStick">球棍模型</option>
         <option value="ballAndStick2">球棍模型 (支持多键)</option>
         <option selected="selected" value="sphere">比例模型</option>
         <option value="icosahedron">二十面体</option>
         <option value="line">线条模型</option>
      </select><br>

      背景颜色:
      <select id="glmol01_bgcolor">
         <option value="0xffffff">白色</option>
         <option selected="selected" value="0x000000">黑色</option>
         <option value="0x888888">灰色</option>
      </select>

      <button id="glmol01_reload">运用</button>
   </div>
</div>

<div
        style="position: absolute; color: white; right: 10px; bottom: 10px; z-index: 99; background-color: rgba(0, 0, 0, 0.65);">
   <input type="radio" name="glmol01_mouseMode" value="0" checked>Rotate<br>
   <input type="radio" name="glmol01_mouseMode" value="1">Translate<br>
   <input type="radio" name="glmol01_mouseMode" value="2">Zoom<br>
   <input type="radio" name="glmol01_mouseMode" value="3">Slab<br><br>
   <button onClick="glmol01.doFunc(function(mol) {mol.zoomInto(mol.getAllAtoms());mol.show()});">Reset view</button>
</div>

<!-- <div id="loading"
   style="border: 2px solid white; position: absolute; color: white; left: 10%; top: 10%; padding: 5px; z-index:101;">
   <p>Loading structure from server... It may take a while.</p>
   <p>If you believe something went wrong, please make sure PDB ID is correct.<br>
      Please also make sure that WebGL is enabled in your browser.
   <ul>
      <li>Internet Explorer: sorry. IE doesn't support WebGL.</li>
      <li>Firefox (version 4 or later): try <a
            href="https://wiki.mozilla.org/Blocklisting/Blocked_Graphics_Drivers#How_to_force-enable_blocked_graphics_features">force
            enable WebGL</a>.</li>
      <li>Chrome: try <a href="http://www.google.com/support/forum/p/Chrome/thread?tid=4b9244822aa2f2e0&hl=en">force
            enable WebGL</a>.</li>
      <li>Safari: have to <a href="https://discussions.apple.com/thread/3300585?start=0&tstart=0">enable WebGL
            manually</a>.</li>
   </ul>
   </p>
</div> -->

<div id="glmol01_pdbTitle"
     style="position:absolute; color: white; background-color: rgba(0, 0, 0, 0.65); font-size:80%"></div>

<script src="js/jquery-1.7.min.js"></script>
<script src="js/Three49custom.js"></script>
<script type="text/javascript" src="js/GLmol.js"></script>
<script type="text/javascript">

   // 获取 URL 中的查询字符串
   var queryString = window.location.search;
   // 创建 URLSearchParams 对象
   var searchParams = new URLSearchParams(queryString);
   // 获取参数值
   var molData = searchParams.get('molData');

   addTab('#glmol01_srcbox', '400px', 0);
   addTab('#glmol01_viewbox', '400px', 1);
   addTab('#glmol01_infobox', '400px', 2);

   var glmol01 = new GLmol('glmol01', true);
   myLoadFile(molData);

   var query = window.location.search.substring(1);
   if (query == '')
      myLoadFile(molData);
   else
      myLoadFile(molData);

   function download(query) {
      var baseURL = '';
      if (query.substr(0, 4) == 'pdb:') {
         query = query.substr(4).toUpperCase();
         if (!query.match(/^[1-9][A-Za-z0-9]{3}$/)) {
            alert("Wrong PDB ID"); return;
         }
         uri = "http://www.pdb.org/pdb/files/" + query + ".pdb";
      } else if (query.substr(0, 4) == 'cid:') {
         query = query.substr(4);
         if (!query.match(/^[1-9]+$/)) {
            alert("Wrong Compound ID"); return;
         }
         uri = "http://pubchem.ncbi.nlm.nih.gov/rest/pug/compound/cid/" + query +
                 "/SDF?record_type=3d";
      }

      $('#loading').show();
      $.get(uri, function (ret) {
         $("#glmol01_src").val(ret);
         glmol01.loadMolecule();
         $('#loading').hide();
      });
   }

   function addTab(tabId, height, zIndex) {
      $(tabId + ' .bottomTab').toggle(
              function () {
                 $(tabId).
                 css('z-index', 100).
                 animate({ bottom: '0px', 'height': (window.innerWidth > 800) ? height : '600px' });
              },
              function () {
                 $(tabId).
                 css('z-index', zIndex).
                 animate({ bottom: '0px', 'height': '20px' });
              }
      );
   }

   function myLoadFile(molData){
      // var molData = "\n  Molvec0106142308252D\n\n  7  7  0  0  0  0  0  0  0  0999 V2000\n    2.5726    1.9879    0.0000 O   0  0  0  0  0  0  0  0  0  0  0  0\n    0.8634    0.9874    0.0000 C   0  0  0  0  0  0  0  0  0  0  0  0\n   -0.8553    1.9879    0.0000 C   0  0  0  0  0  0  0  0  0  0  0  0\n    0.8634   -0.9972    0.0000 C   0  0  0  0  0  0  0  0  0  0  0  0\n   -0.8553   -1.9894    0.0000 C   0  0  0  0  0  0  0  0  0  0  0  0\n   -2.5739    0.9874    0.0000 C   0  0  0  0  0  0  0  0  0  0  0  0\n   -2.5739   -0.9972    0.0000 C   0  0  0  0  0  0  0  0  0  0  0  0\n  1  2  1  0\n  2  3  2  0\n  2  4  1  0\n  3  6  1  0\n  4  5  2  0\n  5  7  1  0\n  6  7  2  0\nM  END";

      console.log(molData);
      $('#glmol01_src').val(molData);
      glmol01.loadMolecule();
      $('#loading').hide();
   }

   function loadFile() {
      var file = $('#glmol01_file').get(0);
      if (file) file = file.files;
      if (!file || !window.FileReader || !file[0]) {
         alert("No file is selected. Or File API is not supported in your browser. Please try Firefox or Chrome.");
         return;
      }
      $('#loading').show();
      var reader = new FileReader();

      reader.onload = function () {
         console.log(reader.result);
         var molData = "\n  Molvec0106142308252D\n\n  7  7  0  0  0  0  0  0  0  0999 V2000\n    2.5726    1.9879    0.0000 O   0  0  0  0  0  0  0  0  0  0  0  0\n    0.8634    0.9874    0.0000 C   0  0  0  0  0  0  0  0  0  0  0  0\n   -0.8553    1.9879    0.0000 C   0  0  0  0  0  0  0  0  0  0  0  0\n    0.8634   -0.9972    0.0000 C   0  0  0  0  0  0  0  0  0  0  0  0\n   -0.8553   -1.9894    0.0000 C   0  0  0  0  0  0  0  0  0  0  0  0\n   -2.5739    0.9874    0.0000 C   0  0  0  0  0  0  0  0  0  0  0  0\n   -2.5739   -0.9972    0.0000 C   0  0  0  0  0  0  0  0  0  0  0  0\n  1  2  1  0\n  2  3  2  0\n  2  4  1  0\n  3  6  1  0\n  4  5  2  0\n  5  7  1  0\n  6  7  2  0\nM  END";

         console.log(molData);
         $('#glmol01_src').val(molData);
         glmol01.loadMolecule();
         $('#loading').hide();
      };

      reader.readAsText(file[0]);
   }

   function saveImage() {
      glmol01.show();
      var imageURI = glmol01.renderer.domElement.toDataURL("image/png");
      window.open(imageURI);
   }

   $('#glmol01_reload').click(function (ev) {
      glmol01.defineRepresentation = defineRepFromController;
      glmol01.rebuildScene();
      glmol01.show();
   });

   function defineRepFromController() {
      var idHeader = "#" + this.id + '_';

      var time = new Date();
      var all = this.getAllAtoms();
      if ($(idHeader + 'biomt').attr('checked') && this.protein.biomtChains != "") all = this.getChain(all, this.protein.biomtChains);
      var allHet = this.getHetatms(all);
      var hetatm = this.removeSolvents(allHet);

      console.log("selection " + (+new Date() - time)); time = new Date();

      this.colorByAtom(all, {});
      var colorMode = $(idHeader + 'color').val();
      if (colorMode == 'ss') {
         this.colorByStructure(all, 0xcc00cc, 0x00cccc);
      } else if (colorMode == 'chain') {
         this.colorByChain(all);
      } else if (colorMode == 'chainbow') {
         this.colorChainbow(all);
      } else if (colorMode == 'b') {
         this.colorByBFactor(all);
      } else if (colorMode == 'polarity') {
         this.colorByPolarity(all, 0xcc0000, 0xcccccc);
      }
      console.log("color " + (+new Date() - time)); time = new Date();

      var asu = new THREE.Object3D();
      var mainchainMode = $(idHeader + 'mainchain').val();
      var doNotSmoothen = ($(idHeader + 'doNotSmoothen').attr('checked') == 'checked');
      if ($(idHeader + 'showMainchain').attr('checked')) {
         if (mainchainMode == 'ribbon') {
            this.drawCartoon(asu, all, doNotSmoothen);
            this.drawCartoonNucleicAcid(asu, all);
         } else if (mainchainMode == 'thickRibbon') {
            this.drawCartoon(asu, all, doNotSmoothen, this.thickness);
            this.drawCartoonNucleicAcid(asu, all, null, this.thickness);
         } else if (mainchainMode == 'strand') {
            this.drawStrand(asu, all, null, null, null, null, null, doNotSmoothen);
            this.drawStrandNucleicAcid(asu, all);
         } else if (mainchainMode == 'chain') {
            this.drawMainchainCurve(asu, all, this.curveWidth, 'CA', 1);
            this.drawMainchainCurve(asu, all, this.curveWidth, 'O3\'', 1);
         } else if (mainchainMode == 'cylinderHelix') {
            this.drawHelixAsCylinder(asu, all, 1.6);
            this.drawCartoonNucleicAcid(asu, all);
         } else if (mainchainMode == 'tube') {
            this.drawMainchainTube(asu, all, 'CA');
            this.drawMainchainTube(asu, all, 'O3\''); // FIXME: 5' end problem!
         } else if (mainchainMode == 'bonds') {
            this.drawBondsAsLine(asu, all, this.lineWidth);
         }
      }

      if ($(idHeader + 'line').attr('checked')) {
         this.drawBondsAsLine(this.modelGroup, this.getSidechains(all), this.lineWidth);
      }
      console.log("mainchain " + (+new Date() - time)); time = new Date();

      if ($(idHeader + 'showBases').attr('checked')) {
         var hetatmMode = $(idHeader + 'base').val();
         if (hetatmMode == 'nuclStick') {
            this.drawNucleicAcidStick(this.modelGroup, all);
         } else if (hetatmMode == 'nuclLine') {
            this.drawNucleicAcidLine(this.modelGroup, all);
         } else if (hetatmMode == 'nuclPolygon') {
            this.drawNucleicAcidLadder(this.modelGroup, all);
         }
      }

      var target = $(idHeader + 'symopHetatms').attr('checked') ? asu : this.modelGroup;
      if ($(idHeader + 'showNonBonded').attr('checked')) {
         var nonBonded = this.getNonbonded(allHet);
         var nbMode = $(idHeader + 'nb').val();
         if (nbMode == 'nb_sphere') {
            this.drawAtomsAsIcosahedron(target, nonBonded, 0.3, true);
         } else if (nbMode == 'nb_cross') {
            this.drawAsCross(target, nonBonded, 0.3, true);

         }
      }

      if ($(idHeader + 'showHetatms').attr('checked')) {
         var hetatmMode = $(idHeader + 'hetatm').val();
         if (hetatmMode == 'stick') {
            this.drawBondsAsStick(target, hetatm, this.cylinderRadius, this.cylinderRadius, true);
         } else if (hetatmMode == 'sphere') {
            this.drawAtomsAsSphere(target, hetatm, this.sphereRadius);
         } else if (hetatmMode == 'line') {
            this.drawBondsAsLine(target, hetatm, this.curveWidth);
         } else if (hetatmMode == 'icosahedron') {
            this.drawAtomsAsIcosahedron(target, hetatm, this.sphereRadius);
         } else if (hetatmMode == 'ballAndStick') {
            this.drawBondsAsStick(target, hetatm, this.cylinderRadius / 2.0, this.cylinderRadius, true, false, 0.3);
         } else if (hetatmMode == 'ballAndStick2') {
            this.drawBondsAsStick(target, hetatm, this.cylinderRadius / 2.0, this.cylinderRadius, true, true, 0.3);
         }

      }
      console.log("hetatms " + (+new Date() - time)); time = new Date();

      var projectionMode = $(idHeader + 'projection').val();
      if (projectionMode == 'perspective') this.camera = this.perspectiveCamera;
      else if (projectionMode == 'orthoscopic') this.camera = this.orthoscopicCamera;

      this.setBackground(parseInt($(idHeader + 'bgcolor').val()));

      if ($(idHeader + 'cell').attr('checked')) {
         this.drawUnitcell(this.modelGroup);
      }

      if ($(idHeader + 'biomt').attr('checked')) {
         this.drawSymmetryMates2(this.modelGroup, asu, this.protein.biomtMatrices);
      }
      if ($(idHeader + 'packing').attr('checked')) {
         this.drawSymmetryMatesWithTranslation2(this.modelGroup, asu, this.protein.symMat);
      }
      this.modelGroup.add(asu);
   };

   glmol01.defineRepresentation = defineRepFromController;

</script>

</body>

</html>